import React, { Component } from 'react'
//导入qs
import qs from 'qs'
//导入请求的接口函数封装
import { goodsRequest } from '../request/cate_request'
import Header from "../components/DefaultHeader"

export default class GoodList extends Component {
    state = {
        type_name: '',
        goods_list: []
    }
    UNSAFE_componentWillMount() {
        const { type_id, type_name } = qs.parse(this.props.location.search.substring(1))
        this.setState({ type_name })
        goodsRequest(type_id).then((res) => {
            this.setState({ goods_list: res.list })
        })
    }
    render() {
        const { type_name, goods_list } = this.state
        return (
            <>
                {/* <div className="page-title">{type_name}</div> */}
                <Header title={type_name}/>
                <div className="goodslist">
                    {
                        goods_list.map((item) => (

                            <div className="item" key={item.id}>
                                <img src={this.$static_host + item.img} alt="" onClick={() => this.props.history.push('/goods_detail?id=' + item.id)} />
                                <div>
                                    <h5>{item.goodsname}</h5>
                                    <p className="price">&yen;{item.price}</p>
                                    <p className="market-price">&yen;{item.market_price}</p>
                                    <button className="btn-cart">加入购物车</button>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </>
        )
    }
}
